<template>
	<view class="page">
		<template v-if="isLogin">
			<template v-if="loadingState.default">
				<loading :loadingState="loadingState"></loading>
			</template>
			<template v-else>
				<view class="body">
					<view class="data-list">
						<view class="item">
							<view class="label">行走总路程</br>(公里)</view>
							<text class="val">{{detail.distance}}</text>
						</view>
						<view class="item">
							<view class="label">监测点数量</br>(个)</view>
							<text class="val">{{detail.surveyNum}}</text>
						</view>
						<view class="item">
							<view class="label">发现红火蚁</br>(巢数)</view>
							<text class="val">{{detail.antNests}}</text>
						</view> 
					</view>
					
					<view class="detail-wrap m-b2">
						<view class="detail-item">
							<view class="label">调查面积：</view>
							<view class="detail-input">
								<view class="content">
									<view class="val">{{detail.dc_area}}</view> 
								</view>		 
							</view>			
						</view> 
						<view class="detail-item">
							<view class="label">发生面积：</view>
							<view class="detail-input">
								<view class="content">
									<view class="val">{{detail.fs_area}}</view> 
								</view>		 
							</view>			
						</view> 
						<view class="detail-item">
							<view class="label">等级：</view>
							<view class="detail-input">
								<view class="content">
									<view class="val">{{detail.re_level}}级</view>  
								</view>		 
							</view>			
						</view> 
						<view class="detail-item">
							<view class="label">采集人：</view>
							<view class="detail-input">
								<view class="content">
									<view class="val">{{detail.realname}}</view>  
								</view>		 
							</view>			
						</view> 
					</view>
					  
				</view>
				
				
				
				<view class="footer">
					<view class="fix-wrap btn-wrap">
						<navigator open-type="navigate" hover-class="none" :url="'/package_project/jc_pro/dataList/dataList?pid='+pid+'&uid='+uid+'&pro_type=4'" class="item-horizontal flex-grow-1 blue"> 
							<view class="icon">
								<view class="iconfont icon-yanshou f-s40"></view> 
							</view>				
							<view class="name">监测数据</view>
						</navigator>
						
						<view class="item-horizontal flex-grow-1 red"  @click="openMap" data-type="public">
							<view class="icon">
								<view class="iconfont icon-daohang f-s40"></view> 
							</view>
							<view class="name">数据地图</view>
						</view>					 
					</view>
				</view>	  
			</template>
			
		</template>
		
		
	</view>
</template>

<script>
	import { 
		HTTP_REQUEST_URL
	} from '@/config.js'
	import loading from '@/components/loading-more.vue'
	import {router} from '@/common/util.js'
	export default {
		name: 'name',
		data() {
			return { 
				isLogin: false, 
				userInfo: uni.getStorageSync('userInfo'),
				loadingState:{
					default:true
				},
				uid:'',
				pid:'',
				detail:{},
				web_host:HTTP_REQUEST_URL

			}


		},
		async onLoad(params) {	
			this.uid=params.uid;
			this.pid=params.pid;
			this.isLogin=await this.$loginState('check');  
			if(this.isLogin){
				this.groupWorkerData();
			}
		},
		async onShow() {

		},
		methods: {
			groupWorkerData:async function(){ 
				let res=await this.$api.ycj_api.groupWorkerData({
					pid:this.pid,
					uid:this.uid
					
				})  
				if(res.data.ret==0){
					this.loadingState.default=false; 
					this.detail=res.data.data;
				}
			},
			
			// 打开地图
			openMap:function(e){ 
				let type = e.currentTarget.dataset.type;  
				router({
					opentype:'navigate',
					url:'/pages/webview/webview',
					params:{ 					 
						pid: this.pid,  
						page_type:"map",
						type: type, 
						uid: this.uid,
						all:true
						
					}
				})
				
			} 
		},
		components: {
			loading
		},

		computed: {

		},
		watch: {

		}

	}
</script>

<style lang="less" scoped> 
	
	.banner{
		position: relative;
		.bg{
			image{
				width: 100%;
			}
		}
		.content{
			position: absolute;
			left:0;
			top:0;
			width: 100%;
			height: 100%;
			.group-icon{
				width: 60rpx;
				margin:100rpx auto 20rpx;
				image{
					width: 60rpx;
				}
			}
			.label{
				margin-bottom: 100rpx;
				font-size: 32rpx;
				text-align: center;
				color:#fff;
			}
			.name{
				font-size: 36rpx;
				font-weight: bold;
				text-align: center;
				color:#fff;
			}
		}
		
	}
	.data-list{
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		background: #fff; 
		margin:0 auto 20rpx;
		padding:30rpx 0; 
		.item{ 
			width:33.3%; 
			font-size:30rpx;
			text-align: center;
			.label{ 
				margin-bottom: 10rpx;
				color:#999;
			}
		}
	}
	.detail-input{
		.content{
			display: flex;
			justify-content: space-between;
			align-items: center;
			.invite-btn{
				display: flex;
				justify-content: space-between;
				align-items: center;
				background: #f00;
				padding:3rpx 10rpx;
				border-radius: 8rpx;
				color:#fff;
				font-size: 30rpx;
				image{
					width: 30rpx;
				}
			}
		}
	}
	.category-list{ 
		margin-bottom: 20rpx;
		padding: 30rpx 0 0;
		.item{
			.icon{
				width: 40%!important;
			}
			.text{
				color:#fff;
			}
		}
	} 

	.data-wrap{ 
		margin: 20rpx auto;
		background: #fff; 
		.hd{
			padding:15rpx 20rpx;
			border-bottom:1rpx solid #ddd;
			text{
				padding-left:20rpx;
				border-left:10rpx solid #f00;
				font-size: 32rpx;
				font-weight: bold;
			}
		}
		.con{ 
		}
	}
	
	
</style>
